<template>
    <div>
        <div style="width: 60%;background-color: white; min-height: 1000px;margin: 20px auto;border-radius: 20px;">
            <div style="padding: 15px 20px;">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <img :src="goodInfo.img" alt="" style="width: 100%;height: 430px;border-radius: 20px">
                    </el-col>
                    <el-col :span="12">
                        <div
                            style="font-size: 20px;font-weight: 900;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                            {{ goodInfo.name }}</div>
                        <div style="color: #666666FF;margin-top: 5px;">销量：{{ goodInfo.count }}</div>
                        <div style="color:red;margin-top: 15px">疯抢价：<span style="font-size: 20px;">{{ goodInfo.price }}
                                / {{ goodInfo.unit }}</span></div>
                        <div style="margin-top: 20px;">
                            <img src="@/assets/img/lanzi.jpg" style="width: 70%;height: 130px;border-radius: 15px"
                                alt="">
                        </div>
                        <div style="color: #666666FF;margin-top: 20px;">商家：<a href="javascript:void(0)" @click="navGo('/SellerInfo?id='+sellerData.id)">{{ sellerData.name }}</a></div>
                        <div style="color: #666666FF;margin-top: 20px;">分类：<a href="javascript:void(0)" @click="navGo('/Type?id='+typeData.id)">{{ typeData.name }}</a></div>
                        <div style="color: #666666FF;margin-top: 20px;">
                            <el-button type="warning" @click="addShop">加入购物车</el-button>
                            <el-button type="warning" @click="addCollect">收藏</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div style="padding: 15px 20px;">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="宝贝详情" name="first">
                        <div style="padding: 10px 175px;" v-html="goodInfo.description"></div>
                    </el-tab-pane>
                    <el-tab-pane label="宝贝评价" name="second">宝贝详情</el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import { selectGood, selectOne,addOne } from "../../api/index";
export default {
    data() {
        return {
            goodsId: this.$route.query.id,
            goodInfo: {},
            typeData: {},
            sellerData: {},
            activeName:"first",
            user:JSON.parse(JSON.stringify(this.$store.getters.getUser))
        };
    },
    created() {
        selectGood("goods", this.goodsId).then(res => {
            if (res.code === 200) {
                console.log(res);
                this.goodInfo = res.data;
                selectOne("type", this.goodInfo.typeId).then(res => {
                    if (res.code === 200) {
                        this.typeData = res.data;
                    } else {
                        this.$message.error(res.message);
                    }
                }),
                selectOne("seller", this.goodInfo.sellerId).then(res => {
                    if (res.code === 200) {

                            this.sellerData = res.data;
                        } else {
                            this.$message.error(res.message);
                        }
                    })
            } else {
                this.$message.error(res.message)
            }
        }),
            console.log(this.goodInfo);
    },
    methods:{
        handleClick(tab,event){
            this.activeName = tab.name
        },
        navGo(url){
            this.$router.push(url);
        },
        addCollect(){
            let data = {
                userId:this.user.id,
                sellerId:this.sellerData.id,
                goodId:this.goodInfo.id
            };
            addOne("collect",data).then(res=>{
                if(res.code===200){
                    this.$message.success(res.message);
                }else{
                    this.$message.error(res.message);
                }
            })
        },
        addShop(){
            let data = {};
            data.userId = this.user.id;
            data.goodId = this.goodInfo.id;
            addOne("shop",data).then(res=>{
                if(res.code===200){
                    this.$message.success(res.message);
                }else{
                    this.$message.error(res.message);
                }
            })
        }
    }
}

</script>

<style>
body {
    background-color: #efebeb
}
a:hover {
    color: red;
}
a {
    text-decoration: none;
    color: #666666
}
</style>